<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="layui/css/layui.css">
	<title>纯净水世界</title>
	<style>
		.Navigation-bar {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-around;
			align-items: center;
			background-color: #1e9fff;
		}

		.LunBo-Gonggao {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
			background-color: skyblue;
		}

		.layui-card {
			width: 300px;
		}

		.layui-card-header {
			width: 300px;
		}

		.layui-card-body {
			width: 300px;
			margin: 24px;
		}

		.layui-card-body {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.phone-box-right {
			width: 1080px;
			height: 614px;
			margin: auto;
			margin-top: 40px;
			display: flex;
			text-align: center;
			/* display:inline-block; text-align: center; background-color: red; */
			/* margin */
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}

		#DataList1 {
			text-align: center;
		}

		.item {
			/* 4元素：平分992 */
			/* 14 * 4 = 56  (992- 56) / 4 */
			width: 234px;
			height: 300px;
			margin: 0 0 14px 14px;
			background: #fff;
			padding: 20px 0;
			box-sizing: border-box;
			float: left;
			transition: all 0.2s linear;
		}

		.item:hover {
			transform: translateY(-2px);
			box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		}

		.item-img {
			width: 160px;
			margin-bottom: 19px;
		}

		.item-name {
			width: 214px;
			height: 21px;
			color: #333;
			line-height: 21px;
			margin: 0 auto 2px;
		}

		.item-desc {
			width: 180px;
			height: 25px;
			color: #b0b0b0;
			font-size: 12px;
			line-height: 18px;
			margin: 0 auto 10px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.item-price {
			color: #ff6700;
			font-size: 14px;
		}

		#Choose {
			background: lightpink;
			width: 400px;
			height: 450px;
			display: flex;
			position: fixed;
			transition: none;
			justify-content: center;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			border-radius: 60px;
			padding: 30px;
			box-shadow: 2px 6px 4px rgba(0, 0, 0, 0.5), 0 2px 2px rgba(0, 0, 0, 0.3);
		}

		.linedate {
			width: 100px;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
		}

		#count {
			width: 30%;
			height: 21px;
			text-align: center;
			padding-left: 0 !important;
			border: 1px solid skyblue;
			margin: 0 5px;
			font-size: 22px;
		}

		#Choose table tbody tr td:first-child {
			text-align: right;
		}
	</style>
</head>

<body>
	<div>
		<!-- 导航栏 -->
		<div class="Navigation-bar">
			<div><img src="/images/Water_World.png" height="60px" /></div>
			<ul class="layui-nav layui-bg-blue" lay-bar="disabled">
				<li class="layui-nav-item"><a href="./">首页</a></li>
				<li class="layui-nav-item"><a href="">菜单1</a></li>
				<li class="layui-nav-item">
					<a href="javascript:;">更多</a>
					<dl class="layui-nav-child">
						<dd><a href="">选项1</a></dd>
						<dd><a href="">选项2</a></dd>
						<dd><a href="">选项3</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item">
					<% if (_username=='-null' ){ %>
						<a href="/login">登录</a>
						<% }else{ %>
							<a href="/userinfo">
								<%=_username %>
							</a>
							<% } %>
				</li>
			</ul>
		</div>
		<!-- 轮播公告指示 -->
		<div class="LunBo-Gonggao">
			<div>
				<div class="layui-carousel" id="ID-carousel-demo-image">
					<div carousel-item>
						<div><img src="/images/LunBo/pic1.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div>
						<div><img src="/images/LunBo/pic2.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div>
						<div><img src="/images/LunBo/pic3.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div>
						<div><img src="/images/LunBo/pic4.jpg" style="width: 100%; height: 100%; object-fit: cover;">
						</div>
						<div><img src="/images/LunBo/pic5.jpg" style="width: 100%; height: 100%; object-fit: cover;">
						</div>
						<div><img src="/images/LunBo/pic6.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div>
						<div><img src="/images/LunBo/pic7.jpg" style="width: 100%; height: 100%; object-fit: cover;"></div>
					</div>
				</div>
			</div>
			<div>
				<div class="layui-col-md6" style="width: 100%; margin-left: 24px;">
					<div class="layui-card" style="width: 100%;">
						<div class="layui-card-header">
							<h2><strong>公告</strong></h2>
						</div>
						<hr class="layui-border-blue">
						<div class="layui-card-body" style="white-space: unset;">
							尊敬的用户，为了提供更好的服务，我们现已推出全新的买水系统。您可以通过网站轻松购买我们的优质水产品。让您在享受健康饮水的同时，也能享受到更多实惠。感谢您对我们的支持和信任，我们将一如既往地为您提供优质的产品和服务。立即登录我们的买水系统，开始您的健康饮水之旅吧！
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 订单、送水 -->
		<div class="phone-box-right">

			<% DB.forEach (function (item, iindex) { %>
				<div class="item">
					<a href="?CommodityID=<%= item.CommodityID%>" product_name>
						<img class="item-img" src="<%= item.CommodityImg %>" ppicture>

						<p class="item-name">
							<!-- 商品名字 -->
							<%= item.CommodityName %>
						</p>

						<p class="item-desc">
							<!-- 商品简介(放容量) -->
							<%= item.CommodityCapacity %>
						</p>
						<p class="item-price">
							<!-- 商品价格 -->
							￥<%= item.CommodityPrice %>
						</p>
					</a>
				</div>
				<% }); %>

		</div>
	</div>
	<% if (ck_two_sql=='0' ) { }else{ DB2.forEach(function(item) { %>
		<div id="Choose" runat="server">
			<table>
				<tr>
					<td></td>
					<td>
						<a href="./" ID="LinkButton1" Style="position: fixed; right: 20px; cursor: pointer;padding: 10px;
							background-color: ghostwhite;border-radius: 8px;"> X </a>
					</td>
				</tr>
				<form id="test" action="/index/order" method="post">
					<tr>
						<td colspan="2" style="text-align: center;">
							<input name="_comID" type="text" value="<%= item.CommodityID %>" style="display: none;" />
							<h1 style="display: inline-block;">
								<%= item.CommodityName %>
							</h1>

						</td>
					</tr>
					<tr>
						<td colspan="2" style="text-align: center;">
							<img width="150px" src="<%= item.CommodityImg %>" />
						</td>
					</tr>
					<tbody>
						<tr>
							<td class="layui-form-item">
								<span>容量：</span>
							</td>
							<td class="layui-form-item">
								<%= item.CommodityCapacity %>
							</td>
						</tr>
						<tr>
							<td>
								<span>单价：</span>
							</td>
							<td>
								<span id="Unit_price">
									<%= item.CommodityPrice %>
								</span>元
							</td>
						</tr>
						<tr>
							<td>
								<span>数量：</span>
							</td>
							<td style="width: 100px;">
								<div class="linedate">
									<button type="button">
										<i class="layui-icon  layui-icon-subtraction" id="desc"></i>
									</button>
									<input type="text" name="count" id="count" placeholder="订购数量" value="1">
									<button type="button">
										<i class="layui-icon layui-icon-addition" id="up"></i>
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<span>总价：</span>
							</td>
							<td>
								<input id="Total_price" name="_comTp" type="text" value="<%= item.CommodityPrice %>" style="width: 25px;background-color: lightpink;border: 0;" />
								元
							</td>
						</tr>
					</tbody>
					<tr style="text-align: center;">
						<td style="width: 100px;">
							<input type="submit" class="layui-btn layui-btn-xs" value="下单" />
						</td>
					</tr>
				</form>
			</table>
		</div>

		<% })}; %>
			<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
			<script src="/layui/layui.js"></script>
			<script>
				$(function(){
					if(window._mass==1){
						alert(window._massCon);
					}
				});
				layui.use(function () {
					var carousel = layui.carousel;
					// 渲染 - 图片轮播
					carousel.render({
						elem: '#ID-carousel-demo-image',
						width: '720px',
						height: '360px',
						interval: 3000
					});
				});

				$(document).ready(function () {
					
					// 单价
					var up = $("#Unit_price");

					// 数量
					var co = $("#count");
					// 总价
					var tp = $("#Total_price");
					$("#desc").on("click", function () {
						console.log(up.text().trim());
						var countValue = parseInt(co.val());
						if (countValue <= 1) {
							co.val(1);
						} else {
							co.val(countValue - 1);
						}
						// tp.text(parseInt(up.text().trim()) * parseInt(co.val()));
						tp.val(parseInt(up.text().trim()) * parseInt(co.val()));
					});
					$("#up").on("click", function () {
						var countValue = parseInt(co.val());
						if (countValue >= 10) {
							co.val(10);
						} else {
							co.val(countValue + 1);
						}
						tp.val(parseInt(up.text().trim()) * parseInt(co.val()));
					});
					
				});

			</script>
</body>

</html>